<template>

  <div style="margin: 0 20px; text-align: center">
    <div style="margin-top: 200px">
      <div style="font-size: 25px">注册</div>
      <div style="font-size: 15px; color: gray; margin-top: 15px">输入账号密码进行注册</div>
    </div>


    <div style="margin-top: 50px">


      <el-input v-model="form.username" type="text" placeholder="用户名/邮箱">
        <template #prefix>
          <el-icon>
            <User/>
          </el-icon>
        </template>
      </el-input>


      <el-input v-model="form.password" type="password" style="margin-top: 10px" placeholder="密码">
        <template #prefix>
          <el-icon>
            <Lock/>
          </el-icon>
        </template>
      </el-input>


      <el-input v-model="form.checkPassword" type="password" style="margin-top: 10px" placeholder="再次输入密码">
        <template #prefix>
          <el-icon>
            <Check/>
          </el-icon>
        </template>
      </el-input>
    </div>


    <div style="margin-top: 40px">
      <el-button @click="registerNow" style="width: 270px" type="warning"> 立即注册</el-button>
    </div>
  </div>

</template>

<script setup>

import {Check, Lock, User} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {postWithToken} from "@/net/postAndGetMethodWithToken";
import {ElMessage} from "element-plus";
import router from "@/router";

const form = reactive({
  data() {
    return {
      isConform: false,
      form: {
        username: '',
        password: '',
        checkPassword: ''
      },
    }
  },
})

const registerNow = () => {
  const regex = /^[a-zA-Z0-9]{4,15}$/ // 正则表达式
  if (!regex.test(form.username) || !regex.test(form.password)) {
    ElMessage.error("用户名和密码必须在4到15位，且只包含数字和大小写字母！");
    this.form = '';
  } else {
    postWithToken('/api/user/register', JSON.stringify({
      userAccount: form.username,
      userPassword: form.password,
      checkPassword: form.checkPassword
    }), (data, code, message) => {
      ElMessage.success("注册成功")
      router.push({name: 'welcome-login'})
    }, (data, code, message) => {
      if (code === 40000) {
        ElMessage.warning(message)
      }
    })
  }
}


</script>


<style scoped>


</style>
